<template>
  <!-- 域名白名单 -->
  <section class="content-section">
    <div class="section-header">
      <h2>域名白名单</h2>
      <p>只有在白名单中的域名才会被拦截</p>
    </div>
    
    <div class="whitelist-manager">
      <div class="add-domain">
        <div class="input-group">
          <el-input 
            v-model="newDomain" 
            placeholder="输入域名前缀，如：api.baidu.com"
            @keyup.enter.native="addDomain"
          ></el-input>
          <el-button type="primary" @click="addDomain">添加域名</el-button>
        </div>
        <div class="domain-examples">
          <p>示例：</p>
          <span class="example-tag">api.github.com</span>
          <span class="example-tag">jsonplaceholder.typicode.com</span>
          <span class="example-tag">httpbin.org</span>
        </div>
      </div>
      
      <div class="domain-list">
        <div class="list-header">
          <h3>已添加的域名 ({{ whitelist.length }})</h3>
          <div class="list-actions">
            <el-button @click="clearDomains">清空全部</el-button>
            <el-button @click="importDomains">批量导入</el-button>
          </div>
        </div>
        <div class="domain-list-container">
          <div v-for="(domain, index) in whitelist" :key="index" class="domain-item">
            <span class="domain-name">{{ domain }}</span>
            <el-button 
              type="danger" 
              size="mini" 
              icon="el-icon-delete"
              @click="removeDomain(index)"
            ></el-button>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import { getStorage, setStorage } from '../../../utils/chrome'

export default {
  name: 'WhitelistPage',
  data() {
    return {
      whitelist: [],
      newDomain: ''
    }
  },
  async mounted() {
    await this.loadWhitelist()
  },
  methods: {
    /**
     * 加载白名单数据
     * 从Chrome存储中获取白名单数据
     */
    async loadWhitelist() {
      try {
        const saved = await getStorage('whitelist')
        console.log("🚀 ~ loadWhitelist ~ saved:", saved)
        if (saved && saved.whitelist) {
          this.whitelist = saved.whitelist
        }
      } catch (error) {
        console.error('加载白名单失败:', error)
        this.$message.error('加载白名单失败')
      }
    },

    /**
     * 保存白名单数据
     * 将白名单数据保存到Chrome存储中
     */
    async saveWhitelist() {
      try {
        await setStorage({ whitelist: this.whitelist })
        console.log("🚀 ~ saveWhitelist ~ 白名单已保存:", this.whitelist)
      } catch (error) {
        console.error('保存白名单失败:', error)
        this.$message.error('保存白名单失败')
      }
    },
    
    /**
     * 添加域名到白名单
     * 验证域名格式并添加到白名单中
     */
    async addDomain() {
      if (!this.newDomain) {
        this.$message.warning('请输入域名')
        return
      }
      
      if (this.whitelist.includes(this.newDomain)) {
        this.$message.warning('域名已存在')
        return
      }
      
      this.whitelist.push(this.newDomain)
      this.newDomain = ''
      await this.saveWhitelist()
      this.$message.success('域名添加成功')
    },
    
    /**
     * 从白名单中删除域名
     * @param {number} index - 要删除的域名索引
     */
    async removeDomain(index) {
      this.whitelist.splice(index, 1)
      await this.saveWhitelist()
      this.$message.success('域名删除成功')
    },
    
    /**
     * 清空所有域名
     * 显示确认对话框后清空白名单
     */
    clearDomains() {
      this.$confirm('确定要清空所有域名吗？', '确认', {
        type: 'warning'
      }).then(async () => {
        this.whitelist = []
        await this.saveWhitelist()
        this.$message.success('域名清空成功')
      })
    },
    
    /**
     * 批量导入域名
     * TODO: 实现批量导入功能
     */
    importDomains() {
      // 实现批量导入逻辑
      this.$message.info('批量导入功能开发中')
    }
  }
}
</script>

<style scoped>
/* 白名单管理样式 */
.whitelist-manager {
  max-width: 800px;
}

.add-domain {
  margin-bottom: 30px;
}

.input-group {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.input-group .el-input {
  flex: 1;
}

.domain-examples {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.domain-examples p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.example-tag {
  background-color: #f0f0f0;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: #666;
}

.domain-list {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #e0e0e0;
}

.list-header h3 {
  margin: 0;
  color: #333;
}

.list-actions {
  display: flex;
  gap: 10px;
}

.domain-list-container {
  max-height: 400px;
  overflow-y: auto;
  padding: 10px;
}

.domain-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  margin-bottom: 8px;
  background-color: #fff;
  transition: all 0.2s ease;
}

.domain-item:hover {
  background-color: #f8f9fa;
  border-color: #d0d0d0;
}

.domain-name {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 14px;
  color: #333;
  flex: 1;
}

.domain-item .el-button {
  margin-left: 10px;
}

/* 空状态样式 */
.domain-list-container:empty::after {
  content: '暂无域名，请添加域名到白名单';
  display: block;
  text-align: center;
  color: #999;
  padding: 40px 20px;
  font-size: 14px;
}
</style>